<template>
  <div>
    <div>
      <template>
        审核状态
        <el-radio-group v-model="radio2">
          <span @click="Choose_order_status(1)"
            ><el-radio :label="3">全部</el-radio></span
          >
          <span @click="Choose_order_status(2)"
            ><el-radio :label="6">已通过</el-radio></span
          >
          <span @click="Choose_order_status(3)"
            ><el-radio :label="9">未通过</el-radio></span
          >
          <span @click="Choose_order_status(4)"
            ><el-radio :label="10">未审核</el-radio></span
          >
        </el-radio-group>
        <el-button type="primary" @click="exportCurrent()"><i class="el-icon-download">导出数据到Excel</i></el-button>
      </template>
    </div>
    <div class="allCheck">
      <el-table
        :data="
          newList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        border
        style="width: 100%"
      >
        <el-table-column fixed prop="order_number" label="订单编号" width="150">
        </el-table-column>
        <el-table-column prop="order_quantity" label="订单数量" width="120">
        </el-table-column>
        <el-table-column prop="name" label="大客户专员姓名" width="120">
        </el-table-column>
        <el-table-column prop="company" label="单位名称" width="120">
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="300">
        </el-table-column>
        <el-table-column prop="zip" label="单价" width="120"> </el-table-column>
        <el-table-column
          prop="zip"
          label="支付金额"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="order_status"
          label="审核状态"
          width="150"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="300px">
          <template>
            <el-button type="primary"><span>通过</span></el-button>
            <el-button type="primary"><span>未通过</span></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 8]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="newList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    chaxun() {
      var y = this.formInline.user;
      console.log(this.formInline.user)
      this.newList = this.tableData.filter(function (x) {
        return x.name == y;
      });
    },
    onSubmit() {
        console.log('submit!');
    },
    reset(){
      console.log('reset')
    },
    exportCurrent: function() {
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable")); //表格id
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "sheet.xlsx"
        ); //文件名
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    Choose_order_status(type) {
      switch (type) {
        case 1:
          this.newList = this.tableData;
          break;
        case 2:
          this.newList = this.tableData.filter(
            (item) => item.order_status == 1
          );
          break;
        case 3:
          this.newList = this.tableData.filter(
            (item) => item.order_status == 0
          );
          break;
        case 4:
          this.newList = this.tableData.filter(
            (item) => item.order_status == 2
          );
          break;
      }
    },
  },
  mounted() {
    this.axios
      .post("http://47.108.201.43:3000/api/getOrderStatus")
      .then((res) => {
        this.tableData = res.data.res;
      });
    this.Choose_order_status();
  },
  data() {
    return {
      radio2: 1,
      tableData: [],
      currentPage: 1,
      pagesize: 4,
      newList: [],
    };
  },
};
</script>
<style scoped>
* {
  text-align: center;
}
body div {
  text-align: center;
}
.allCheck {
  text-align: center;
  max-height: 600px;
  width: 100%;
}
</style>
